<template>
    <div>
        <div class="filter-container">
            <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
            </el-date-picker>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="交易流水" v-model="listQuery.jyls" clearable>
            </el-input>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="所属订单号" v-model="listQuery.ssddh" clearable>
            </el-input>
            <el-select clearable class="male filter-item" style="width: 160px" v-model="listQuery.zjlx" placeholder="资金流向">
                <el-option v-for="item in selectOption2" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-select clearable class="male filter-item" style="width: 160px" v-model="listQuery.sszh" placeholder="所属子账户">
                <el-option v-for="item in subAccountList" :key="item.key" :label="item.subAccount" :value="item.id">
                </el-option>
            </el-select>
            <!-- <el-checkbox v-model="gtype" label="2"  @change="gtypechange" style="margin:0 20px;">普通商品资金明细</el-checkbox> -->
            <el-button class="filter-item male" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </div>
        <el-table :data="list" border fit highlight-current-row style="width: 100%;">
            
            <el-table-column align="center" label="交易时间">
                <template slot-scope="scope">
                <span>{{scope.row.jysj}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="交易流水">
                <template slot-scope="scope">
                <span>{{scope.row.jyls}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="所属子账户">
                <template slot-scope="scope">
                <span>{{scope.row.cuser}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="所属订单号">
                <template slot-scope="scope">
                <span>{{scope.row.ssddh}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="资金流向">
                <template slot-scope="scope">
                <span v-html="scope.row.zjlx == 0?'进账':'出账'"></span>
                <!-- <span>{{scope.row.zjlx}}</span> -->
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                <span>{{scope.row.jylx}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="金额/元">
                <template slot-scope="scope">
                <span>{{scope.row.jyje}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.currentPage" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>
    </div>
</template>
<script>
import { parseTime } from '../../api/time.js'
export default {
   data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      subAccountList: JSON.parse(localStorage.getItem("userInfo")).subAccountList,
      listQuery: {
        status: '',
        gtype:'',
        sszh: '',
        zjlx: '',
        ssddh: '',
        jyls: '',
        startTime: '',
        endTime: '',
        userId: JSON.parse(localStorage.getItem("userInfo")).userId,
        // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
        currentPage: 1,
        pageSize: 10
      },
      gtype:'',
      dateRange: '',
      typeOptions: '',
      selectOption2: [
        {
          label: '出账',
          key: '1'
        },
        {
          label: '进账',
          key: '0'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    dateRange: function() {
      if (this.dateRange === null) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = parseTime(this.dateRange[0])
        this.listQuery.endTime = parseTime(this.dateRange[1])
      }
    }
  },
  methods: {
    getList(){
      var that = this
      that.$post({
            api: "/account/zjjlList",
            data: that.listQuery
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("accountCzTxJl",data)
        });
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
     
    },
    handleRemove(row) {
    },
    gtypechange(id){
      if(id){
        this.listQuery.gtype = 2
      }else{
        this.listQuery.gtype = ''
      }
      
      console.log(id)
    }
  }
}
</script>

<style lang="scss" scoped>


</style>

